<template>
  <!-- 个人标签选择 弹窗 -->
  <div>
    <el-dialog
      title="选择标签1"
      v-model="personLabelDialog"
      width="600px"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="cancelPersonLabelDialog"
    >
      <template #header>
        <div>
          <!-- <svg-icon icon-class="tags" style="margin-right: 5px; color: #73d897"></svg-icon> -->
          <span>选择标签</span>
        </div>
      </template>

      <el-form :model="fromPersonLabel">
        <el-form-item label="添加标签" label-width="70px">
          <el-input class="input-new-tag" v-model.trim="inputValue" ref="saveTagInput"></el-input>
          <el-button class="button-new-tag" type="primary" @click="apiFilesUserLabelCreate">添加到我的标签</el-button>
        </el-form-item>
        <el-form-item label="文件标签" label-width="70px">
          <!-- <el-input v-model="fromPersonLabel.labelName" autocomplete="off"></el-input> -->
          <el-tag :key="tag.labelId" v-for="(tag, indexs) in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag, indexs)">
            {{ tag.labelName }}
          </el-tag>
          <el-tag :key="tag.id" v-for="(tag, index) in dynamicTagsNew" closable :disable-transitions="false" @close="handleCloseNew(index)">
            {{ tag.labelName }}
          </el-tag>
        </el-form-item>
        <el-form-item label="我的标签" label-width="70px">
          <div class="label_database">
            <el-tag class="my_tags" v-for="mtag in myTagsList" :key="mtag.id" @click="selectTagsItem(mtag)">{{ mtag.labelName }}</el-tag>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPersonLabelDialog">取 消</el-button>
          <el-button type="primary" @click="SureDialogPersonLabelClick">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
const { proxy } = getCurrentInstance() as any;
const personLabelDialog = ref(false);
const fromPersonLabel = reactive({
  labelName: ''
});
const emit: any = defineEmits(['refreshData']);
import { ApiPerQuerySelect, ApiPerfilesUserLabel, ApiPerLabelCreate, ApiPerRecordCreate, ApiPerCreateList } from '@/api/personDoc/personDocApi';

const myTagsList = ref([]);
const inputValue = ref('');
const dynamicTags = ref([]);
const dynamicTagsNew = ref([]);
const removeLabelIds = ref([]); //保存我的标签,这里用作判断删除了哪些标签处理
const parentObj = ref({} as any);
const enterprise_active_TagsList = ref({});

const parentObjs = ref([]);

//外部调用打开标签弹窗
const openTagsDialog = (val) => {
  personLabelDialog.value = true;
  if (val.length > 1) {
    parentObjs.value = val;
  } else {
    if (Array.isArray(val)) {
      parentObj.value = Object(val[0]);
    } else {
      parentObj.value = val;
    }

    apiFilesLabelRecordQuerySelect(val);
    console.log(parentObj.value, '如果 val 既不是对象也不是数组，可以设置为默认对象');
  }
  apiFilesUserLabelQuery();
};
// 删除旧的标签
const handleClose = (tag, indexs) => {
  removeLabelIds.value.push(tag.labelId);
  dynamicTags.value.splice(indexs, 1);
};
// 删除新的标签
const handleCloseNew = (tag) => {
  dynamicTagsNew.value.splice(tag, 1);
};

// 点击我的标签
const selectTagsItem = (val) => {
  dynamicTagsNew.value.forEach((item) => {
    item.labelId = item.id;
  });
  let concatArray = dynamicTagsNew.value.concat(dynamicTags.value);
  if (concatArray.findIndex((item) => item.labelId == val.id) == -1) {
    dynamicTagsNew.value.push(val);
  } else {
    ElMessage.warning('标签里已有该标签');
  }
};

// 标签确定按钮
const SureDialogPersonLabelClick = () => {
  let labelId = dynamicTagsNew.value.map((item) => {
    return item.id;
  });

  //多个文件添加标签
  if (parentObjs.value.length > 0) {
    let fileId = parentObjs.value.map((item) => {
      return item.id;
    });

    console.log('🚀 ~ fileId ~ fileId:', fileId);
    console.log('🚀 ~ fileId ~ fileId99999999:', labelId);
    let oParam = {
      fileIds: fileId,
      fileType: 'personal',
      labelId: labelId,
      labelType: 'user'
    };
    ApiPerCreateList(oParam).then((res) => {
      emit('refreshData');
      ElMessage.success('添加成功');
      cancelPersonLabelDialog();
    });
    return;
  } else {
    //单个文件添加标签
    let oParam = {
      fileId: parentObj.value.id,
      fileType: 'personal',
      labelId: labelId,
      removeLabelId: removeLabelIds.value,
      labelType: 'user'
    };
    console.log('🚀 ~ SureDialogPersonLabelClick ~ oParam:', oParam);

    ApiPerRecordCreate(oParam).then((res) => {
      emit('refreshData');
      ElMessage.success('添加成功');
      cancelPersonLabelDialog();
    });
  }
};

// 添加到我的标签
const apiFilesUserLabelCreate = () => {
  if (inputValue.value == '') {
    ElMessage.warning('标签不能为空');
    return;
  }
  let oParam = {
    labelName: inputValue.value
  };

  ApiPerLabelCreate(oParam).then((res) => {
    inputValue.value = '';
    selectTagsItem(res.data);
    apiFilesUserLabelQuery();
  });
};

// 查询标签记录已添加的文件
const apiFilesLabelRecordQuerySelect = (row) => {
  let oParam = {
    fileId: row.id || row[0].id,
    fileType: 'personal',
    labelType: 'user'
  };
  console.log('🚀 ~ apiFilesLabelRecordQuerySelect ~ oParam:', oParam);

  ApiPerQuerySelect(oParam).then((res) => {
    dynamicTags.value = res.data;
  });
};

// 查询全部我的标签
const apiFilesUserLabelQuery = () => {
  let oParam = {
    page: 0,
    size: 100
  };
  ApiPerfilesUserLabel(oParam).then((res) => {
    myTagsList.value = res.data.rows;
  });
};

// 标签取消按钮
const cancelPersonLabelDialog = () => {
  personLabelDialog.value = false;
  dynamicTags.value = [];
  myTagsList.value = [];
  dynamicTagsNew.value = [];
  removeLabelIds.value = [];
  fromPersonLabel.labelName = '';
  parentObjs.value = [];
};

defineExpose({
  //调用组件需要导出 v-model的变量
  openTagsDialog
});

onMounted(() => {});
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  gap: 10px;
}
#testTree {
  :deep(.el-checkbox .el-checkbox__inner) {
    display: none;
  }
  :deep(div[role='group']) {
    .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
  }
}
.my_tags {
  cursor: pointer;
}
.my_tags:hover {
  background-color: #409eff;
  color: #fff;
  border: 1px solid #409eff;
}
.label_database {
  width: 100%;
  min-height: 80px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 6px;
  // display: flex;
  // flex-wrap: wrap;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 190px;
  margin-left: 10px;
  vertical-align: bottom;
}
.select_btn {
  margin-bottom: 10px;
}
</style>
